<template>
  <div class="app-container">
    <el-card shadow="never" class="mb-3">
      <el-form ref="searchFormRef" :inline="true" class="mt-2.5" label-width="auto">
        <el-form-item prop="username" v-for="(item, index) in s1" :key="index" :label="item">
          <el-input placeholder="请选择" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" class="">
      <div class="toolbar-wrapper mb-3">
        <el-button type="primary" @click="dialogVisible = true">新建发货单</el-button>
        <el-button type="primary">下载模板</el-button>
      </div>
      <el-table :data="tableData">
        <!-- <el-table-column type="selection" width="50" align="center" /> -->
        <el-table-column type="index" label="序" width="50" />
        <el-table-column v-for="(item, index) in s2" :key="index" :prop="'name' + index" :label="item" />
        <!-- <el-table-column v- prop="name1" label="发货清单" /> -->
        <!-- <el-table-column prop="name2" label="内向交货单号" />
        <el-table-column prop="name3" label="发货时间" />
        <el-table-column prop="name4" label="发货地点" />
        <el-table-column prop="name5" label="供方名称" />
        <el-table-column prop="name6" label="送达日期" />
        <el-table-column prop="name7" label="采购人" />
        <el-table-column prop="name8" label="转送至" />
        <el-table-column prop="name9" label="经总司" />
        <el-table-column prop="name10" label="基地" />
        <el-table-column prop="name11" label="备注" /> -->
        <el-table-column fixed="right" label="操作" align="center">
          <el-button type="primary" text bg size="small" @click="$router.push('/labels/shippingDetail')">详情</el-button>
          <div>
            <el-button type="danger" text bg size="small">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible" title="新建" width="30%">
      <el-form ref="formRef" :rules="formRules" label-width="auto">
        <el-form-item prop="username" v-for="(item, index) in s3" :key="index" :label="item">
          <el-input placeholder="请输入" />
        </el-form-item>
        <!-- <el-form-item prop="username" label="转送至">
          长兴
        </el-form-item>
        <el-form-item prop="username" label="经总司">
          中转
        </el-form-item> -->
        <el-form-item prop="username" label="上传文件">
          <!-- <el-input placeholder="请输入" /> -->
        </el-form-item>

      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary">新建</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue"

// "发货清单", "内向交货单号", '基地',
const s1 = ["发货时间", "发货地点", "供方名称", "送达日期", "采购人", "备注"]
const s3 = ["发货时间", "发货地点", "供方名称", "采购人", "备注"]
const s2 = [ "内向交货单号", "发货时间", "发货地点", "供方名称", "送达日期", "采购人", "备注"]
const formRules = {
  username: [{ required: true, trigger: "blur", message: "请输入" }]
}
const dialogVisible = ref(false)
const tableData = [ ]
for (let i = 0; i < 10; i++) {
  tableData.push({
    // name1: "2532234",
    name0: "4358923",
    name1: "2024-04-04 07:28:35",
    name2: "无锡",
    name3: "无锡工业自动化贸易公司",
    name4: "2024-04-04",
    name5: "张三",
    name6: "",
    // name9: "中转",
    // name10: "标准件仓库",
    // name11: ""
  })
}
</script>
<style lang="scss" scoped></style>
